<template>
  <div>
    <van-nav-bar fixed title="学生管理"></van-nav-bar>
    <div class="list-area">
      <van-cell>
         <van-col :span="24">
            <van-button size="small" type="primary" @click="showAddFun">添加学生</van-button>
            <input v-model="keyword" class="search-keyword" placeholder="请输入姓名查询" type="text"/>
            <van-button size="small" type="info" @click="search">查询</van-button>
          </van-col>
      </van-cell>
      <van-list v-model="loading" :finished="finished" @load="querylist" finished-text="没有更多了">
        <van-row class="student-row" v-for="(item,idx) in list" :key="idx">
          <van-cell @click="show=true;currItem=item;">
            <van-col :span="8">姓名：{{item.name}}</van-col>
            <van-col :span="8">学号：{{item.studentID}}</van-col>
            <van-col :span="8">性别：{{item.sex}}</van-col>
            <van-col :span="8">宿舍：{{item.dorm}}</van-col>
            <van-col :span="8">民族：{{item.nation}}</van-col>
            <van-col :span="24">邮箱：{{item.mail}}</van-col>
            <van-col :span="24">联系方式：{{item.tel}}</van-col>
            <van-col :span="24">出生日期：{{item.birthdate}}</van-col>
            <van-col :span="24">政治面貌：{{item.politicsStatus}}</van-col>
            <van-col :span="24">身份证：{{item.identityCard}}</van-col>
            <van-col :span="24">毕业高中：{{item.highSchool}}</van-col>
            <van-col :span="24">住址：{{item.adress}}</van-col>
          </van-cell>
        </van-row>
      </van-list>
    </div>
    <tabbar />
    <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />

    <van-popup v-model="showSendMsg" class="sendMsgDialog">
      <van-cell>发送消息</van-cell>
      <div class="send-form">
        <van-field label="标题" v-model="sendForm.subject" placeholder="请填写标题"></van-field>
        <van-field label="内容" v-model="sendForm.text" type="textarea" placeholder="请填写发送内容"></van-field>
      </div>
      <van-cell>
        <van-button plain type="primary" size="small" @click="sendMsg">发送</van-button>
      </van-cell>
    </van-popup>

    <van-popup v-model="showAddStudent" class="sendMsgDialog">
      <van-cell class="add-student-form-title">添加学生</van-cell>
      <div class="add-student-form">
        <van-field placeholder="姓名" v-model="form.name"></van-field>
        <van-field placeholder="性别" v-model="form.sex"></van-field>
        <van-field placeholder="学号" v-model="form.studentID"></van-field>
        <van-field placeholder="邮箱" v-model="form.mail"></van-field>
        <van-field placeholder="民族" v-model="form.nation"></van-field>
        <van-field placeholder="出生日期" v-model="form.birthdate"></van-field>
        <van-field placeholder="班级" v-model="form.className"></van-field>
        <van-field placeholder="政治面貌" v-model="form.dorm"></van-field>
        <van-field placeholder="宿舍" v-model="form.dorm"></van-field>
        <van-field placeholder="身份证号码" v-model="form.identityCard"></van-field>
        <van-field placeholder="毕业高中" v-model="form.highSchool"></van-field>
        <van-field placeholder="住址" v-model="form.adress"></van-field>
        <van-field placeholder="联系方式" v-model="form.tel"></van-field>
      </div>
      <van-cell>
        <div style="text-align:center;">
          <van-button type="primary" size="small" @click="saveAddStudent">{{form._id?'确定更新':'确定添加'}}</van-button>
          <van-button type="info" size="small" @click="resetAddStudentForm">重置</van-button>
          <van-button plain type="info" size="small" @click="cancelAdd">取消</van-button>
        </div>
      </van-cell>
    </van-popup>
  </div>
</template>
<script>
import tabbar from "@/components/tabbar.vue";
export default {
  data() {
    return {
      currItem: {},
      showAddStudent: false,
      showSendMsg: false,
      show: false,
      actions: [{ name: "编辑" }, { name: "发送消息" }, { name: "删除" }],
      loading: false,
      list: [],
      finished: true,
      page: 1,
      size: 10,
      keyword: "",
      sendForm: {
        subject: "",
        text: ""
      },
      form: {
        name: "",
        studentID: "",
        mail: "",
        sex: "",
        nation: "",
        birthdate: "",
        identityCard: "",
        className: "",
        politicsStatus: "",
        dorm: "",
        highSchool: "",
        adress: "",
        tel: ""
      }
    };
  },
  components: { tabbar },
  mounted() {
    this.querylist();
  },
  methods: {
      search:function(){
          this.page=1;
          this.querylist();
      },
    showAddFun: function() {
      this.showAddStudent = true;
      console.log(this.form);
    },
    cancelAdd: function() {
      this.form = {
        name: "",
        studentID: "",
        mail: "",
        sex: "",
        nation: "",
        birthdate: "",
        identityCard: "",
        className: "",
        politicsStatus: "",
        dorm: "",
        highSchool: "",
        adress: "",
        tel: ""
      };
      this.showAddStudent = false;
    },
    resetAddStudentForm: function() {
      this.form = {
        name: "",
        studentID: "",
        mail: "",
        sex: "",
        nation: "",
        birthdate: "",
        identityCard: "",
        className: "",
        politicsStatus: "",
        dorm: "",
        highSchool: "",
        adress: "",
        tel: ""
      };
    },
    saveAddStudent: function() {
      let _that = this;
      if (_that.form._id) {
        this.$ajax({
          method: "patch",
          url: "/students/" + _that.form._id,
          data: this.form
        })
          .then(res => {
            if (res.data) {
              _that.$toast.success("更新成功");
              _that.showAddStudent = false;
              _that.resetAddStudentForm();
            }
          })
          .catch(function(error) {
            console.log(error);
          });
      } else {
        this.$ajax({
          method: "post",
          url: "/students",
          data: this.form
        })
          .then(res => {
            if (res.data) {
              _that.$toast.success("添加成功");
              _that.showAddStudent = false;
              _that.resetAddStudentForm();
            }
          })
          .catch(function(error) {
            console.log(error);
          });
      }
    },
    sendMsg: function() {
      let _that = this;
      let _data = Object.assign(_that.sendForm);
      _data.to = [_that.currItem.mail];
      this.$ajax({
        method: "post",
        url: "/message",
        data: _data
      })
        .then(res => {
          if (res.data) {
            _that.$toast.success("发送成功");
            _that.showSendMsg = false;
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    onSelect: function(item) {
      let _that = this;
      this.show = false;
      switch (item.name) {
        case "编辑":
          _that.form = _that.currItem;
          _that.showAddStudent = true;
          break;
        case "发送消息":
          this.showSendMsg = true;
          break;
        case "删除":
          this.$dialog
            .confirm({
              title: "删除提示",
              message: "确定删除？"
            })
            .then(() => {
              _that.delStudent();
            })
            .catch(() => {});
          break;
      }
    },
    delStudent: function() {
      let _that = this;
      this.$ajax({
        method: "delete",
        url: "/students",
        data: { students: [_that.currItem._id] }
      })
        .then(res => {
          if (res.data) {
            _that.$toast.success("删除成功");
            _that.showSendMsg = false;
            _that.querylist();
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    querylist: function() {
      let _that = this;
      let url = "/students?className=D自集成191";
      if (this.keyword) {
        url += "&name=" + this.keyword;
      }
      this.$ajax
        .get(url)
        .then(res => {
          if (res.data) {
            _that.list = res.data;
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
};
</script>
<style>
.student-row {
  border-bottom: 1px solid #ddd;
}
.send-form {
  width: 90%;
  display: block;
}
.sendMsgDialog {
  width: 90%;
}
.add-student-form-title {
  font-size: 1.2rem;
  font-weight: bold;
}
.search-keyword{
    border:1px solid #ddd;
    /* margin-left:8px; */
    outline: none;
    line-height:30px;
    padding:0px 0px 0px 10px;
    box-sizing: border-box;
}
</style>